<template>
  <div id="header">
    <div>
      <div id="logo"></div>
      <ul class="list">
        <li>
          <i class="inlineBlockIcon qiye"></i>
          <span class="topList_title">企业管理</span>
        </li>
        <li>
          <i class="inlineBlockIcon zixun"></i>
          <span class="topList_title">咨询中心</span>
        </li>
        <li>
          <i class="inlineBlockIcon fuwu"></i>
          <span class="topList_title">服务中心</span>
        </li>
        <li>
          <i class="inlineBlockIcon pingu"></i>
          <span class="topList_title">评估报告</span>
        </li>
      </ul>
    </div>
    <ul class="list">
      <li>
        <i class="inlineBlockIcon user"></i>
        <span class="topList_title">张雯雯</span>
      </li>
      <li>
        <i class="inlineBlockIcon tuichu"></i>
        <span class="topList_title">退出</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'CommonHeader',
    data () {
      return {

      }
    },
    mounted () {

    }
  }
</script>

<style scoped>
  @import '../assets/public.css';
  #header{
    width:100%;
    height: 135px;
    background-color: #4797D4;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #header>div{
    display: flex;
    align-items: center;
  }
  #logo{
    width:223px;
    height:80px;
    background-image: url("img/top_logo.png");
    margin:0 70px 0 32px;
  }
  .list{
    display: flex;
    align-items: center;
  }
  .list>li{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right:56px;
  }
  .qiye{
    width: 37px;
    height:40px;
    background-image: url("img/top_qiye.png");
    margin-bottom:14px;
  }
  .zixun{
    width: 36px;
    height:36px;
    background-image: url("img/top_zixun.png");
    margin-bottom:14px;
  }
  .fuwu{
    width: 33px;
    height:36px;
    background-image: url("img/top_fuwu.png");
    margin-bottom:15px;
  }
  .pingu{
    width: 32px;
    height:36px;
    background-image: url("img/top_pingu.png");
    margin-bottom:13px;
  }
  .user{
    width: 36px;
    height:36px;
    background-image: url("img/top_userLogo.png");
    margin-bottom:16px;
  }
  .tuichu{
    width: 34px;
    height:36px;
    background-image: url("img/top_tuichu.png");
    margin-bottom:16px;
  }
  .topList_title{
    color: #C3E5FF;
    font-size:16px;
  }
</style>
